<template>
  <div id="app">
    <!-- <h1>{{fullTitle}}</h1>
    <h2>{{title}}</h2> -->
    <h3>单价：{{price}}</h3>
    <div>
      <button @click="sub">-</button>
      <span>{{num}}</span>
      <button @click="add">+</button>
    </div>
    <h3>总价：{{totalPrice}}</h3>
  </div>
</template>

<script>


export default {
  name:'app',
  data(){
    return {
      title:"hello vue",
      num:0,
      price:15
    }
  },
  computed:{
    fullTitle(){
      return "晓舟报告" + this.title
    },
    totalPrice(){
      return this.num * this.price
    }
  },
  watch:{
    num(newValue,oldValue){
      console.log(newValue);
      console.log(oldValue);
    }
  },
  methods:{
    add(){
      this.num++
    },
    sub(){
      if(this.num>0){
        this.num--
      }
    }
  }
}
</script>

<style>

</style>
